<template>
  <div class="step-panel">
    <h2>{{ stepTitle }}</h2>
    
    <div class="final-review">
      <div class="final-summary">
        <h3>签约信息</h3>
        
        <!-- 签约信息表单 -->
        <div class="contract-form">
          <div class="form-grid">
            <!-- 签约编号 -->
            <div class="form-group">
              <label>签约编号 <span class="required">*</span></label>
              <div class="contract-number-display">
                <span class="contract-number">{{ localFormData.contractInfo.contractNumber }}</span>
                <button type="button" class="refresh-btn" @click="generateContractNumber" title="重新生成">
                  🔄
                </button>
              </div>
              <div class="field-hint">系统自动生成，可重新生成</div>
            </div>

            <!-- 合同名称 -->
            <div class="form-group">
              <label>合同名称 <span class="required">*</span></label>
              <input
                type="text"
                v-model="localFormData.contractInfo.contractName"
                placeholder="请输入合同名称"
                maxlength="100"
              />
            </div>

            <!-- 合同期限 -->
            <div class="form-group">
              <label>合同期限 <span class="required">*</span></label>
              <div class="date-range-group">
                <el-date-picker
                  v-model="localFormData.contractInfo.contractStartDate"
                  type="date"
                  placeholder="开始日期"
                  style="width: 48%"
                  value-format="YYYY-MM-DD"
                />
                <span class="date-separator">至</span>
                <el-date-picker
                  v-model="localFormData.contractInfo.contractEndDate"
                  type="date"
                  placeholder="结束日期"
                  style="width: 48%"
                  value-format="YYYY-MM-DD"
                />
              </div>
            </div>

            <!-- 签约日期 -->
            <div class="form-group">
              <label>签约日期 <span class="required">*</span></label>
              <el-date-picker
                v-model="localFormData.contractInfo.signDate"
                type="date"
                placeholder="选择签约日期"
                style="width: 100%"
                value-format="YYYY-MM-DD"
              />
            </div>

            <!-- 丙方姓名 -->
            <div class="form-group">
              <label>丙方姓名</label>
              <input
                type="text"
                v-model="localFormData.contractInfo.partyCName"
                placeholder="请输入丙方姓名"
                maxlength="50"
              />
            </div>

            <!-- 丙方联系方式 -->
            <div class="form-group">
              <label>丙方联系方式</label>
              <input
                type="tel"
                v-model="localFormData.contractInfo.partyCContact"
                placeholder="请输入丙方联系方式"
                maxlength="20"
              />
            </div>
          </div>

          <!-- 合同上传 -->
          <div class="contract-upload-section">
            <h4>合同文件上传 <span class="required">*</span></h4>
            <div class="upload-group">
              <div class="upload-item">
                <div class="upload-wrapper">
                  <div
                    class="upload-area contract-upload-area"
                    @click="triggerFileInput('contractFile')"
                  >
                    <input
                      type="file"
                      accept=".pdf"
                      ref="contractFileInput"
                      @change="handleContractUpload($event)"
                      class="upload-input"
                      style="display: none"
                    />
                    <div
                      v-if="!localFormData.contractInfo.contractFile"
                      class="upload-placeholder"
                    >
                      <span class="upload-icon">📄</span>
                      <span class="upload-text">点击上传合同文件</span>
                      <span class="upload-subtext">仅支持PDF格式，文件大小不超过60MB</span>
                    </div>
                    <div v-else class="file-info-large">
                      <div class="file-icon">📄</div>
                      <div class="file-details">
                        <span class="file-name">{{ localFormData.contractInfo.contractFile.name }}</span>
                        <span class="file-size">({{ formatFileSize(localFormData.contractInfo.contractFile.size) }})</span>
                      </div>
                      <div class="file-actions">
                        <button
                          type="button"
                          class="preview-btn"
                          @click.stop="previewContract"
                          :disabled="!localFormData.contractInfo.contractFile"
                        >
                          预览
                        </button>
                        <button
                          type="button"
                          class="remove-btn"
                          @click.stop="clearContractFile"
                        >
                          删除
                        </button>
                      </div>
                    </div>
                  </div>
                  <div class="upload-hint">
                    请上传正式的合同文件，支持PDF格式，文件大小不超过60MB
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 签约信息预览 -->
          <div class="contract-preview-section">
            <h4>签约信息预览</h4>
            <div class="preview-card">
              <div class="preview-grid">
                <div class="preview-item">
                  <label>签约编号：</label>
                  <span class="preview-value contract-number-preview">{{ localFormData.contractInfo.contractNumber }}</span>
                </div>
                <div class="preview-item">
                  <label>合同名称：</label>
                  <span class="preview-value">{{ localFormData.contractInfo.contractName || '未填写' }}</span>
                </div>
                <div class="preview-item">
                  <label>合同期限：</label>
                  <span class="preview-value">
                    {{ localFormData.contractInfo.contractStartDate || '未选择' }} 至 {{ localFormData.contractInfo.contractEndDate || '未选择' }}
                  </span>
                </div>
                <div class="preview-item">
                  <label>签约日期：</label>
                  <span class="preview-value">{{ localFormData.contractInfo.signDate || '未选择' }}</span>
                </div>
                <div class="preview-item">
                  <label>丙方姓名：</label>
                  <span class="preview-value">{{ localFormData.contractInfo.partyCName || '未填写' }}</span>
                </div>
                <div class="preview-item">
                  <label>丙方联系方式：</label>
                  <span class="preview-value">{{ localFormData.contractInfo.partyCContact || '未填写' }}</span>
                </div>
                <div class="preview-item full-width">
                  <label>合同文件：</label>
                  <span class="preview-value">
                    {{ localFormData.contractInfo.contractFile ? localFormData.contractInfo.contractFile.name : '未上传' }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 最终确认 -->
          <div class="final-confirm">
            <label class="confirm-checkbox">
              <input type="checkbox" v-model="isConfirmed" />
              <span class="checkmark"></span>
              我已仔细核对以上签约信息，确认信息准确无误，并同意提交入住申请及签约
            </label>
            <div class="confirm-hint" v-if="!isContractInfoValid">
              <span class="hint-warning">⚠️ 请完善所有必填的签约信息</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 合同预览对话框 -->
    <div v-if="showContractPreview" class="dialog-overlay">
      <div class="contract-preview-dialog">
        <div class="dialog-header">
          <h3>合同文件预览</h3>
          <button class="close-btn" @click="showContractPreview = false">×</button>
        </div>
        <div class="dialog-content">
          <div class="pdf-preview" v-if="localFormData.contractInfo.contractFile">
            <div class="pdf-placeholder">
              <div class="pdf-icon">📄</div>
              <div class="pdf-info">
                <h4>{{ localFormData.contractInfo.contractFile.name }}</h4>
                <p>文件大小：{{ formatFileSize(localFormData.contractInfo.contractFile.size) }}</p>
                <p>由于浏览器限制，请下载后查看完整内容</p>
              </div>
            </div>
            <div class="pdf-actions">
              <button class="download-btn" @click="downloadContract">
                ⬇️ 下载合同
              </button>
              <button class="print-btn" @click="printContract">
                🖨️ 打印合同
              </button>
            </div>
          </div>
          <div v-else class="no-file">
            暂无合同文件可预览
          </div>
        </div>
        <div class="dialog-actions">
          <button class="cancel-btn" @click="showContractPreview = false">关闭</button>
        </div>
      </div>
    </div>

    <div class="step-actions">
      <button @click="$emit('prev')">上一步</button>
      <button 
        @click="completeProcess" 
        :disabled="!isConfirmed || !isContractInfoValid || saving"
        class="submit-btn"
      >
        {{ saving ? '保存中...' : '📝 完成签约并提交' }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { addContract } from "@/api/le/contract"
import { updateElderly } from "@/api/le/elderly"

const props = defineProps({
  formData: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['complete', 'prev', 'update:form-data'])

const stepTitle = '第五步：完成签约办理'

// 本地状态
const localFormData = reactive(JSON.parse(JSON.stringify(props.formData)))
const isConfirmed = ref(false)
const showContractPreview = ref(false)
const contractFileInput = ref(null)
const saving = ref(false)

// 监听父组件数据变化
watch(() => props.formData, (newData) => {
  Object.assign(localFormData, newData)
}, { deep: true })

// 验证逻辑
const isContractInfoValid = computed(() => {
  const contract = localFormData.contractInfo
  return !!contract.contractNumber && 
         !!contract.contractName && 
         !!contract.contractStartDate && 
         !!contract.contractEndDate && 
         !!contract.signDate && 
         !!contract.contractFile
})

// 方法
const generateContractNumber = () => {
  const randomNum = Math.floor(1000000000 + Math.random() * 9000000000)
  localFormData.contractInfo.contractNumber = `HT${randomNum}`
  updateFormData()
}

const triggerFileInput = (type) => {
  switch (type) {
    case "contractFile":
      contractFileInput.value?.click()
      break
  }
}

const handleContractUpload = (e) => {
  const file = e.target.files[0]
  if (!file) return

  // 验证文件类型
  if (file.type !== 'application/pdf' && !file.name.toLowerCase().endsWith('.pdf')) {
    alert('请上传PDF格式的文件')
    resetFileInput('contractFile')
    return
  }

  // 更新为60MB限制
  const maxSize = 60 * 1024 * 1024
  if (file.size > maxSize) {
    alert('文件大小不能超过60MB')
    resetFileInput('contractFile')
    return
  }

  // 保存文件对象
  localFormData.contractInfo.contractFile = file
  updateFormData()
}

const resetFileInput = (type) => {
  switch (type) {
    case "contractFile":
      if (contractFileInput.value) contractFileInput.value.value = ""
      break
  }
}

const clearContractFile = () => {
  localFormData.contractInfo.contractFile = null
  resetFileInput('contractFile')
  updateFormData()
}

const previewContract = () => {
  if (!localFormData.contractInfo.contractFile) {
    alert('请先上传合同文件')
    return
  }
  showContractPreview.value = true
}

const downloadContract = () => {
  if (!localFormData.contractInfo.contractFile) return
  
  const url = URL.createObjectURL(localFormData.contractInfo.contractFile)
  const a = document.createElement('a')
  a.href = url
  a.download = localFormData.contractInfo.contractFile.name
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}

const printContract = () => {
  if (!localFormData.contractInfo.contractFile) return
  
  // 在实际应用中，这里可以调用打印API
  alert('打印功能需要集成专业的PDF打印库')
}

const formatFileSize = (bytes) => {
  if (bytes === 0) return "0 Bytes"
  const k = 1024
  const sizes = ["Bytes", "KB", "MB"]
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
}

// 保存合同到数据库
const saveContract = async () => {
  try {
    saving.value = true
    
    // 检查老人ID是否存在
    if (!localFormData.elder?.id) {
      ElMessage.error('老人ID不存在，无法保存合同')
      return false
    }
    
    // 处理合同文件
    let contractFileValue = null
    if (localFormData.contractInfo.contractFile) {
      // 如果是文件对象，需要先上传文件获取文件路径
      if (localFormData.contractInfo.contractFile instanceof File) {
        // 这里需要先上传文件，获取文件路径
        // 暂时跳过文件上传，只保存基本信息
        contractFileValue = null
      } else {
        // 如果已经是文件路径字符串，直接使用
        contractFileValue = localFormData.contractInfo.contractFile
      }
    }
    
    // 构建合同数据
    const contractData = {
      contractName: localFormData.contractInfo.contractName,
      contractNo: localFormData.contractInfo.contractNumber,
      elderlyId: localFormData.elder.id, // 使用老人ID
      startDate: localFormData.contractInfo.contractStartDate,
      endDate: localFormData.contractInfo.contractEndDate,
      signTime: localFormData.contractInfo.signDate,
      partyCName: localFormData.contractInfo.partyCName,
      partyCPhone: localFormData.contractInfo.partyCContact,
      contractStatus: '生效中', // 默认状态
      creator: localFormData.currentUser?.id || null, // 使用当前用户ID
      createTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
      contractFile: contractFileValue // 确保是字符串或null
    }
    
    // 保存合同数据
    const response = await addContract(contractData)
    if (response.code === 200) {
      ElMessage.success('合同保存成功！')
      return true
    } else {
      ElMessage.error('合同保存失败：' + (response.msg || '未知错误'))
      return false
    }
  } catch (error) {
    console.error('保存合同失败:', error)
    ElMessage.error('保存合同失败：' + error.message)
    return false
  } finally {
    saving.value = false
  }
}

// 更新老人状态为已审核
const updateElderlyStatus = async () => {
  try {
    // 检查老人ID是否存在
    if (!localFormData.elder?.id) {
      ElMessage.error('老人ID不存在，无法更新状态')
      return false
    }
    
    // 构建更新数据，将is_deleted设置为0（已审核）
    const updateData = {
      id: localFormData.elder.id,
      isDeleted: 0 // 设置为0表示已审核通过
    }
    
    // 调用更新老人接口
    const response = await updateElderly(updateData)
    if (response.code === 200) {
      ElMessage.success('老人状态已更新为已审核')
      return true
    } else {
      ElMessage.error('更新老人状态失败：' + (response.msg || '未知错误'))
      return false
    }
  } catch (error) {
    console.error('更新老人状态失败:', error)
    ElMessage.error('更新老人状态失败：' + error.message)
    return false
  }
}

const completeProcess = async () => {
  if (!isContractInfoValid.value) {
    ElMessage.error('请完善所有必填的签约信息')
    return
  }
  
  // 先保存合同到数据库
  const contractSaved = await saveContract()
  if (!contractSaved) {
    return // 保存失败，不继续
  }
  
  // 更新老人状态为已审核
  const statusUpdated = await updateElderlyStatus()
  if (!statusUpdated) {
    return // 状态更新失败，不继续
  }
  
  // 更新表单数据
  updateFormData()
  
  // 完成流程
  emit('complete')
}

// 更新表单数据
const updateFormData = () => {
  emit('update:form-data', localFormData)
}
</script>

<style scoped>
.step-panel h2 {
  color: #1f2937;
  margin-top: 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e7eb;
}

.final-review {
  padding: 20px 0;
}

.final-summary h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #1f2937;
  border-bottom: 2px solid #3b82f6;
  padding-bottom: 10px;
}

/* 签约信息表单 */
.contract-form {
  margin: 20px 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #4b5563;
  font-weight: 500;
}

.required {
  color: #ef4444;
}

input,
select,
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

/* 签约编号样式 */
.contract-number-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

.contract-number {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #1e40af;
  font-size: 16px;
  flex: 1;
}

.refresh-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.refresh-btn:hover {
  background: #e5e7eb;
}

.field-hint {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

/* 日期范围样式 */
.date-range-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-separator {
  color: #6b7280;
  font-size: 14px;
  min-width: 20px;
  text-align: center;
}

/* 合同上传区域 */
.contract-upload-section {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.contract-upload-section h4 {
  margin: 0 0 16px 0;
  color: #374151;
}

.upload-group {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.upload-item {
  margin-bottom: 10px;
}

.upload-wrapper {
  width: 100%;
}

.upload-area {
  width: 100%;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: #3b82f6;
  background-color: #f9fafb;
}

.contract-upload-area {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

.upload-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  text-align: center;
}

.upload-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.upload-text {
  font-size: 14px;
  margin-bottom: 4px;
}

.upload-subtext {
  font-size: 12px;
  color: #6b7280;
}

.file-info-large {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  width: 100%;
}

.file-icon {
  font-size: 24px;
}

.file-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.file-name {
  font-weight: 500;
  color: #374151;
}

.file-size {
  font-size: 12px;
  color: #6b7280;
}

.file-actions {
  display: flex;
  gap: 8px;
}

.preview-btn {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #dbeafe;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.preview-btn:hover:not(:disabled) {
  background: #dbeafe;
}

.preview-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.remove-btn {
  background-color: #fef2f2;
  color: #dc2626;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.upload-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #9ca3af;
}

/* 签约信息预览 */
.contract-preview-section {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}

.contract-preview-section h4 {
  margin: 0 0 16px 0;
  color: #374151;
}

.preview-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 20px;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.preview-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.preview-item.full-width {
  grid-column: 1 / -1;
}

.preview-item label {
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

.preview-value {
  color: #1f2937;
  font-size: 15px;
  font-weight: 500;
}

.contract-number-preview {
  font-family: 'Courier New', monospace;
  color: #1e40af;
  background: #eff6ff;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

/* 最终确认区域 */
.final-confirm {
  margin-top: 30px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.confirm-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  line-height: 1.5;
}

.confirm-checkbox input {
  width: auto;
  margin-top: 2px;
}

.confirm-hint {
  margin-top: 12px;
}

.hint-warning {
  color: #dc2626;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 合同预览对话框 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.contract-preview-dialog {
  background: white;
  border-radius: 8px;
  padding: 0;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.dialog-header h3 {
  margin: 0;
  color: #1f2937;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.close-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.dialog-content {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}

.pdf-preview {
  text-align: center;
}

.pdf-placeholder {
  padding: 40px 20px;
  background: #f8fafc;
  border: 2px dashed #e5e7eb;
  border-radius: 8px;
  margin-bottom: 20px;
}

.pdf-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.pdf-info h4 {
  margin: 0 0 8px 0;
  color: #1f2937;
}

.pdf-info p {
  margin: 4px 0;
  color: #6b7280;
}

.pdf-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.download-btn,
.print-btn {
  padding: 10px 20px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  color: #374151;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.download-btn:hover,
.print-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.no-file {
  text-align: center;
  padding: 40px;
  color: #9ca3af;
  font-style: italic;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #e5e7eb;
}

.cancel-btn {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

/* 按钮区域样式 */
.step-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 40px;
}

button {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

button:not(:disabled):hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

button:nth-of-type(1) {
  background-color: #f3f4f6;
  color: #1f2937;
}

.submit-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
}

.submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .preview-grid {
    grid-template-columns: 1fr;
  }
  
  .date-range-group {
    flex-direction: column;
    gap: 8px;
  }
  
  .date-range-group .el-date-picker {
    width: 100% !important;
  }
  
  .date-separator {
    min-width: auto;
  }
  
  .pdf-actions {
    flex-direction: column;
  }
  
  .contract-number-display {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .file-info-large {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .file-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
</style>